<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<title>添加收获地址</title>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/base.css" />
	</head>
	<body>

		<div id="app">

			<input type="text" placeholder="选择地区" :value="addressText" readonly="" @click="addressModel = true" />

			<div class="model" v-show="addressModel" @click="addressModel = false">
				<div class="model-content" @click.stop="addressModel = true">
					<div class="addressBox">
						<ul>
							<li v-for="(provinceItem,provinceIndex) in addressList" @click.stop="onProvinceSelect(provinceIndex,provinceItem.text)" :class="{active: provinceIndex === activeProvince}">
								<span>{{provinceItem.text}}</span>
								<div class="cityBox">
									<ul>
										<li v-for="(cityItem,cityIndex) in provinceItem.children" @click.stop="onCitySelect(cityIndex,cityItem.text)" :class="{active: cityIndex === activeCity}">
											<span>{{cityItem.text}}</span>
											<div class="areaBox">
												<ul>
													<li v-for="(areaItem,areaIndex) in cityItem.children" @click.stop="onAreaSelect(areaIndex,areaItem.text)" :class="{active: areaIndex == activeArea}">
														<span>{{areaItem.text}}</span>
													</li>
												</ul>
											</div>
										</li>
									</ul>
								</div>
							</li>
						</ul>

					</div>
				</div>
			</div>

		</div>
		<script src="js/vue.js"></script>
		<script src="js/data.city.js"></script>
		<script>		
			new Vue({
				el: "#app",
				data: {
					addressModel: false, /*选择地址选择模态框*/
					addressList: [], //城市列表
					province: '', //选中的省份 
					city: '', //选中的城市
					area: '', //选择的区域
					addressText: '请选择', //选中的完整地址
					activeProvince: 0, 
					activeCity: 0,
					activeArea: 0
				},
				mounted: function() {
					const that = this;
					that.addressList = init_city_picker;
				},
				methods: {
					/*选择省份*/
					onProvinceSelect: function(index, item) {
						var that = this;
						that.activeProvince = index;
						that.province = item;
						that.addressText = that.province;
						console.log(index, that.activeProvince, that.province)
					},
					/*选择城市*/
					onCitySelect: function(index, item) {
						var that = this;
						that.activeCity = index;
						that.city = item
						that.addressText = that.province + " " + that.city;
						console.log(index, that.activeCity, that.city, that.addressText);
					},
					/*选择区域*/
					onAreaSelect: function(index, item) {
						var that = this;
						that.activeArea = index;
						that.area = item
						that.addressText = that.province + " " + that.city + " " + that.area;
						that.addressModel = false;
						console.log(index, that.activeArea, that.area, that.addressText);
					}
				}
			})
		</script>
	</body>

</html>